﻿@page "/range-selector/numeric-axis"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@using Newtonsoft.Json
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the cricket match data between two countries with the help of numeric axis in range navigator.</p>
</SampleDescription>
<ActionDescription>
    <p>Numeric axis is used to plot numeric data in range navigator. To render numeric axis, set <code> ValueType</code> to <code> Double</code>. Tooltip is enabled in this example, to see the tooltip in action, while the selected range is changed.</p>
</ActionDescription>

@if (AusData == null && SlData == null)
{
    <div class="stockchartloader"></div>
}
else
{
    <div class="control-section" align="center">
        <h4 style="font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;">Score Comparision AUS vs SL</h4>
        <div>
            <SfRangeNavigator LabelPosition="AxisPosition.Outside" @bind-Value="@Value">
                <RangeNavigatorEvents Loaded="BeforeRender" Changed="OnRangeChanged"></RangeNavigatorEvents>
                <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
                <RangeNavigatorSeriesCollection>
                    <RangeNavigatorSeries DataSource="@AusData" Width="2" XName="x" Type="RangeNavigatorType.Line" YName="y">
                    </RangeNavigatorSeries>
                    <RangeNavigatorSeries DataSource="@SlData" Width="2" XName="x" Type="RangeNavigatorType.Line" YName="y">
                    </RangeNavigatorSeries>
                </RangeNavigatorSeriesCollection>
            </SfRangeNavigator>
        </div>
        <div id="chartcontainer">
            <SfChart>
                <ChartArea><ChartAreaBorder Width="0" Color="transparent"></ChartAreaBorder></ChartArea>
                <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" Title="Overs" ZoomFactor="@ZF" ZoomPosition="@ZP">
                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                </ChartPrimaryXAxis>
                <ChartPrimaryYAxis Minimum="0" Title="Runs">
                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                    <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                </ChartPrimaryYAxis>
                <ChartAnnotations>
                    <ChartAnnotation Content="<div></div>" X="XValue" Y="15%" CoordinateUnits="Syncfusion.Blazor.Charts.Units.Pixel" Region="Regions.Chart"></ChartAnnotation>
                </ChartAnnotations>
                <ChartSeriesCollection>
                    <ChartSeries DataSource="@AusData" XName="x" YName="y" Name="AUS" Width="2" Type="ChartSeriesType.Spline">
                        <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                    </ChartSeries>
                    <ChartSeries DataSource="@SlData" XName="x" YName="y" Name="SL" Width="2" Type="ChartSeriesType.Spline">
                        <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                    </ChartSeries>
                </ChartSeriesCollection>
                <ChartTooltipSettings Enable="false" Shared="false"></ChartTooltipSettings>
                <ChartLegendSettings Visible="false"></ChartLegendSettings>
            </SfChart>
        </div>
    </div>
}
@code{
    private ChartData[] AusData;
    private ChartData[] SlData;
    double ZF = 1;
    double ZP = 0;
    public string XValue = "85%";
    private Theme theme { get; set; }
    protected override async Task OnInitializedAsync()
    {
        await Task.Run(() =>
        {
            AusData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/range-navigator/double-data-aus.json"));
            SlData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/range-navigator/double-data-sl.json"));
        });
    }
    public class ChartData
    {
        public double x { get; set; }
        public double y { get; set; }
        public bool isWicket { get; set; }
    }
    private object Value = new object[] { 31, 50 };
    public void OnRangeChanged(ChangedEventArgs args)
    {
        ZF = args.ZoomFactor;
        ZP = args.ZoomPosition;
        StateHasChanged();
    }

    string CurrentUri;
    void BeforeRender(RangeLoadedEventArgs Args)
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            Args.Theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            Args.Theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            Args.Theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            Args.Theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            Args.Theme = Theme.Tailwind;
        }
        else
        {
            Args.Theme = Theme.Bootstrap4;
        }
    }

    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            theme = Theme.Bootstrap4;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            theme = Theme.Tailwind;
        }
        else
        {
            theme = Theme.Bootstrap4;
        }
    }
}